<template>
	<view class="thirdCategory">
		<block v-for="(item, index) in categoryDatas" :key="index">
			<view class="thirdCategory_body" @click.stop="$emit('thirdCategory:click', item)">
				<view class="thirdCategory_image">
					<sl-image :value="item.thumbnail"></sl-image>
				</view>
				<view class="thirdCategory_name">{{ item.name }}</view>
			</view>
		</block>
		<slot></slot>
	</view>
</template>

<script>
	//分类管理，三级分类
	export default {
		//
		name: 'thirdCategory',
		//
		props: {
			//三级分类数据集合
			categoryDatas: {
				type: Array,
				default: function() {
					return [];
				},
				required: true
			}
		},
	};
</script>

<style lang="scss" scoped>
	.thirdCategory {
		background: $uni-bg-color;
		padding: $xj-standard-padding;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.5rem;
		width: 100%;

		.thirdCategory_body {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;

			.thirdCategory_image {
				position: relative;
				width: 116rpx;
				height: 116rpx;
				overflow: hidden;
				border-radius: 14rpx;
				background: #FAFAFA;
			}

			.thirdCategory_name {
				font-weight: 400;
				line-height: 40rpx;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				text-overflow: ellipsis;
				white-space: break-spaces;
				word-break: break-all;
				color: #666;
				text-align: center;
				font-size: 24rpx;
				height: 80rpx;
				width: 80px;
				max-width: 80px;
				/* 假设宽度为100像素 */
				 overflow: hidden;
				// text-overflow: ellipsis;
				// white-space: break-spaces;
			}
		}
	}
</style>